<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>登录</title>
    <!-- 引入WeUI CSS -->
    <link rel="stylesheet" href="./weui/weui.min.css">
    <style>
        /* 全局样式 */
        body {
      background: linear-gradient(135deg, #348d5f 0%, #bfbf86 100%);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            height: 100vh;
            padding: 0;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        
        .page-container {
            width: 90%;
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
        }
        
        /* 头部样式优化 */
        .header {
            text-align: center;
            margin-bottom: 30px;
            padding: 10px 0;
        }
        
        .logo-container {
            position: relative;
            width: 90px;
            height: 90px;
            margin: 0 auto 20px;
        }
        
        .logo {
            width: 90px;
            height: 90px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #667eea;
            font-size: 40px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
            position: relative;
            z-index: 2;
            animation: float 3s ease-in-out infinite;
        }
        
        .logo-shadow {
            position: absolute;
            width: 80px;
            height: 20px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 50%;
            bottom: -10px;
            left: 5px;
            z-index: 1;
            filter: blur(5px);
            animation: shadow 3s ease-in-out infinite;
        }
        
        .logo-pulse {
            position: absolute;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            top: -5px;
            left: -5px;
            z-index: 1;
            animation: pulse 2s ease-out infinite;
        }
        
        .header-title {
            font-size: 28px;
            color: white;
            font-weight: 600;
            margin-bottom: 10px;
            letter-spacing: 1px;
        }
        
        .header-desc {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.5;
        }
        
        /* 表单样式优化 */
        .weui-form {
            background-color: rgba(255,255,255,0.95);
            border-radius: 16px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            padding: 25px 20px;
            transition: transform 0.3s ease;
            backdrop-filter: blur(10px);
        }
        
        .weui-form:hover {
            transform: translateY(-5px);
        }
        
        .weui-cells {
            margin-top: 0;
        }
        
        .weui-cell {
            padding: 20px 0;
            transition: background-color 0.2s;
        }
        
        .weui-cell:active {
            background-color: rgba(7, 193, 96, 0.05);
        }
        
        .weui-label {
            font-size: 17px;
            color: #333;
            width: 80px;
            font-weight: 500;
        }
        
        .weui-input {
            font-size: 16px;
            color: #333;
            padding: 12px 0;
            transition: border-color 0.3s;
            border-bottom: 1px solid #e5e5e5;
        }
        
        .weui-input:focus {
            border-bottom: 2px solid #07C160;
            padding-bottom: 11px; /* 保持总高度不变 */
        }
        
        .input-container {
            display: flex;
            align-items: center;
            width: 100%;
        }
        
        .weui-cell__bd {
            flex: 1;
        }
        
        /* 图标样式优化 */
        .icon-container {
            display: flex;
            align-items: center;
            margin-left: 10px;
        }
        
        .valid-icon {
            color: #07C160;
            font-size: 18px;
            display: none;
        }
        
        .invalid-icon {
            color: #f43530;
            font-size: 18px;
            display: none;
        }
        
        .weui-cells{
            background-color: transparent;
        }
        
        /* 错误提示样式 */
        .weui-cells__tips {
            font-size: 14px;
            color: #f43530!important;
            margin-top: 6px;
            padding-left: 80px;
            display: none;
            animation: fadeIn 0.3s;
        }
        
        /* 提交按钮区域 */
        .weui-form__opr-area {
            margin: 30px 0 20px;
        }
        
        .weui-form__opr-area:last-child{
            margin-bottom: 20px;
        }
        
        .weui-btn_primary {
            background: linear-gradient(312deg, #47cb87 0%, #bfbf86);
            border-radius: 10px;
            height: 50px;
            font-size: 18px;
            font-weight: 500;
            box-shadow: 0 4px 10px rgba(7, 193, 96, 0.3);
            transition: all 0.3s;
        }
        
        .weui-btn_primary:not(.weui-btn_disabled):active {
            transform: translateY(2px);
            box-shadow: 0 2px 5px rgba(7, 193, 96, 0.3);
        }
        
        .weui-btn_disabled {
            background: #E6E6E6;
            color: #999;
            box-shadow: none;
        }
        
        /* 辅助登录选项 */
        .login-options {
            margin-top: 25px;
            text-align: center;
        }
        
        .divider {
            display: flex;
            align-items: center;
            margin: 20px 0;
            color: #999;
            font-size: 14px;
        }
        
        .divider::before,
        .divider::after {
            content: "";
            flex: 1;
            height: 1px;
            background: #e5e5e5;
        }
        
        .divider span {
            padding: 0 15px;
        }
        
        .other-login-options {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 15px;
        }
        
        .login-option {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f5f5f5;
            color: #666;
            font-size: 20px;
            transition: all 0.3s;
            cursor: pointer;
        }
        
        .login-option:hover {
            background: #e5e5e5;
            transform: translateY(-2px);
        }
        
        /* 底部信息 */
        .footer {
            text-align: center;
            margin-top: 25px;
            font-size: 13px;
            color: rgba(255, 255, 255, 0.7);
        }
        
        .footer a {
            color: rgba(255, 255, 255, 0.9);
            text-decoration: none;
        }
        
        /* 状态提示 */
        .status-info {
            text-align: center;
            margin: 15px 0;
            padding: 12px;
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            color: white;
            font-size: 14px;
        }
        
        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            15%, 45%, 75% { transform: translateX(-5px); }
            30%, 60%, 90% { transform: translateX(5px); }
        }
        
        @keyframes float {
            0%, 100% { 
                transform: translateY(0); 
                box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
            }
            50% { 
                transform: translateY(-10px); 
                box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
            }
        }
        
        @keyframes shadow {
            0%, 100% { 
                transform: scale(1);
                opacity: 0.5;
            }
            50% { 
                transform: scale(0.8);
                opacity: 0.3;
            }
        }
        
        @keyframes pulse {
            0% {
                transform: scale(0.8);
                opacity: 0.7;
            }
            70% {
                transform: scale(1.2);
                opacity: 0;
            }
            100% {
                transform: scale(1.2);
                opacity: 0;
            }
        }
        
        .shake {
            animation: shake 0.6s;
        }
        
        /* 响应式调整 */
        @media (max-width: 375px) {
            .weui-label {
                width: 70px;
            }
            
            .weui-cells__tips {
                padding-left: 70px;
            }
            
            .header-title {
                font-size: 24px;
            }
            
            .page-container {
                padding: 15px;
            }
            
            .logo-container {
                width: 80px;
                height: 80px;
            }
            
            .logo {
                width: 80px;
                height: 80px;
                font-size: 35px;
            }
            
            .logo-shadow {
                width: 70px;
                left: 5px;
            }
            
            .logo-pulse {
                width: 90px;
                height: 90px;
                top: -5px;
                left: -5px;
            }
        }
        
        /* 表单组间距 */
        .weui-cells__group {
            margin-bottom: 10px;
        }
        
        /* 输入框placeholder样式 */
        .weui-input::placeholder {
            color: #bbb;
            font-size: 15px;
        }
    </style>
</head>
<body>
    <div class="page-container">
        <div class="header">
            <div class="logo-container">
                <div class="logo-pulse"></div>
                <div class="logo">
                    <img src="./assets/13.png" alt="" style="width: 80%;height: auto;">
                    <!-- <i>🔑</i> -->
                </div>
                <div class="logo-shadow"></div>
            </div>
            <h1 class="header-title">欢迎登录</h1>
            <p class="header-desc">使用手机号登录您的账户</p>
        </div>
        
        <div id="statusInfo" class="status-info" style="display: none;"></div>
        
        <div class="weui-form">
            <div class="weui-cells__group weui-cells__group_form">
                <!-- 手机号输入 -->
                <div class="weui-cells weui-cells_form">
                    <div class="weui-cell weui-cell_active">
                        <div class="weui-cell__hd">
                            <label class="weui-label">手机号</label>
                        </div>
                        <div class="weui-cell__bd">
                            <div class="input-container">
                                <input class="weui-input" id="phone" type="tel" placeholder="请输入11位手机号" maxlength="11">
                                <div class="icon-container">
                                    <span class="valid-icon" id="phoneValid">✓</span>
                                    <span class="invalid-icon" id="phoneInvalid">✗</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="weui-cells__tips" id="phoneError">请输入有效的11位手机号</div>
            </div>

            
            
            <div class="weui-form__opr-area">
                <button type="button" class="weui-btn weui-btn_primary" id="submitBtn">登录</button>
            </div>
            
       
        </div>
        
      
    </div>


    <!-- 引入WeUI JS -->
    <script src="./weui/axios.min.js"></script>
    <script src="./weui/weui.min.js"></script>
    <!-- <script src="./wechat-auth.js"></script> -->
    <script src="./axios.js"></script>
    <script src="./api.js"></script>
    <script>
        // 获取DOM元素
        // const nameInput = document.getElementById('name');
        const phoneInput = document.getElementById('phone');
        const plateInput = document.getElementById('plate');
        const submitBtn = document.getElementById('submitBtn');
        const statusInfo = document.getElementById('statusInfo');
        
        // 验证状态
        let isNameValid = false;
        let isPhoneValid = false;
        let isPlateValid = false;
        
        // 当前车辆信息ID（用于修改）
        let currentCarId = null;
        
        // 页面加载时获取车辆信息
        document.addEventListener('DOMContentLoaded', async function() {
             try {
                
                // 检查授权
                // const isAuthed = await weChatAuth.checkAuth();
                
                // if (isAuthed) {
                    // if(localStorage.getItem('wechat_openid')){
                    // loadCarInfo();
                    // }
                    
                // } else {
                    // 授权中，等待跳转
                    // document.getElementById('loading').innerHTML = '微信授权中...';
                // }
            } catch (error) {
                console.error('页面初始化失败:', error);
                document.getElementById('loading').innerHTML = '加载失败，请刷新页面';
            }
          
        });
        
        // 加载车辆信息
        async function loadCarInfo() {
            try {
                const loading = weui.loading('加载中...');
                const openId = localStorage.getItem('wechat_openid');
                
                // 调用获取车辆信息接口
                const response = await getCarListfind({ openid: openId });
                
                loading.hide();
                
                if (response.code === 200 && response.data ) {
                    // 有已登记的车辆信息
                    const carInfo = response.data; // 假设只显示第一条记录
                    
                    // 填充表单数据
                    nameInput.value = carInfo.username || '';
                    phoneInput.value = carInfo.mobile || '';
                    plateInput.value = carInfo.number_plate || '';
                    
                    // 保存当前车辆ID用于修改
                    currentCarId = carInfo.id;
                    
                    // 更新验证状态
                    validateAllFields();
                    
                    // 显示状态提示
                    statusInfo.textContent = '已加载您登记的车辆信息，可进行修改';
                    statusInfo.style.display = 'block';
                    statusInfo.style.backgroundColor = '#f0f9ff';
                    statusInfo.style.color = '#1890ff';
                    
                    // 更新按钮文字
                    submitBtn.textContent = '更新信息';
                    
                } else {
                    // 没有车辆信息，显示新增提示
                    statusInfo.textContent = '您尚未登记车辆信息，请填写以下信息';
                    statusInfo.style.display = 'block';
                    statusInfo.style.backgroundColor = '#fff7e6';
                    statusInfo.style.color = '#fa8c16';
                    
                    // 初始化隐藏所有错误提示和图标
                    document.querySelectorAll('.weui-cells__tips').forEach(el => el.style.display = 'none');
                    document.querySelectorAll('.valid-icon, .invalid-icon').forEach(el => el.style.display = 'none');
                }
                
            } catch (error) {
                console.error('加载车辆信息失败:', error);
                weui.toast('加载失败，请重试', {
                    className: 'weui-toast_warn',
                    duration: 2000
                });
            }
        }
        
        // 验证所有字段
        function validateAllFields() {
            const name = nameInput.value.trim();
            const phone = phoneInput.value.trim();
            const plate = plateInput.value.trim();
            
            isNameValid = validateName(name);
            isPhoneValid = validatePhone(phone);
            isPlateValid = validatePlate(plate);
            
            // 更新图标显示
            updateValidationIcons();
            // updateSubmitButton();
        }
        
        // 更新验证图标
        function updateValidationIcons() {
            const name = nameInput.value.trim();
            const phone = phoneInput.value.trim();
            const plate = plateInput.value.trim();
            
            // 姓名图标
            if (name.length > 0) {
                document.getElementById('nameValid').style.display = isNameValid ? 'inline' : 'none';
                document.getElementById('nameInvalid').style.display = isNameValid ? 'none' : 'inline';
                document.getElementById('nameError').style.display = isNameValid ? 'none' : 'block';
            }
            
            // 手机号图标
            if (phone.length > 0) {
                document.getElementById('phoneValid').style.display = isPhoneValid ? 'inline' : 'none';
                document.getElementById('phoneInvalid').style.display = isPhoneValid ? 'none' : 'inline';
                document.getElementById('phoneError').style.display = isPhoneValid ? 'none' : 'block';
            }
            
            // 车牌号图标
            if (plate.length > 0) {
                document.getElementById('plateValid').style.display = isPlateValid ? 'inline' : 'none';
                document.getElementById('plateInvalid').style.display = isPlateValid ? 'none' : 'inline';
                document.getElementById('plateError').style.display = isPlateValid ? 'none' : 'block';
            }
        }
        
        // 姓名验证（2-10个中文字符）
        function validateName(name) {
            if (!name) {
                return false;
            }
            return /^[\u4e00-\u9fa5]{2,10}$/.test(name);
        }
        
        // 手机号验证（11位数字，1开头）
        function validatePhone(phone) {
            if (!phone) {
                return false;
            }
            return /^1[3-9]\d{9}$/.test(phone);
        }
        
        // 车牌号验证（简单验证）
        function validatePlate(plate) {
            if (!plate) {
                return false;
            }
            return /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4,5}[A-Z0-9挂学警港澳]{1}$/.test(plate);
        }
        
        // 更新提交按钮状态
        function updateSubmitButton() {
            // submitBtn.disabled = !(isNameValid && isPhoneValid && isPlateValid);
        }
        
        // 显示验证结果
        function showValidationResult(input, isValid, validIcon, invalidIcon, errorMsg, shouldShake = false) {
            if (input.value.trim().length > 0) {
                if (isValid) {
                    validIcon.style.display = 'inline';
                    invalidIcon.style.display = 'none';
                    errorMsg.style.display = 'none';
                } else {
                    validIcon.style.display = 'none';
                    invalidIcon.style.display = 'inline';
                    errorMsg.style.display = 'block';
                    
                    // 只在需要时添加抖动效果
                    if (shouldShake) {
                        input.parentElement.parentElement.classList.add('shake');
                        setTimeout(() => {
                            input.parentElement.parentElement.classList.remove('shake');
                        }, 600);
                    }
                }
            } else {
                validIcon.style.display = 'none';
                invalidIcon.style.display = 'none';
                errorMsg.style.display = 'none';
            }
            
            // updateSubmitButton();
        }

        
        // 手机号输入验证（输入时只显示图标，不抖动）
        phoneInput.addEventListener('input', function() {
            const phone = this.value.trim();
            isPhoneValid = validatePhone(phone);
            
            showValidationResult(
                this, 
                isPhoneValid, 
                document.getElementById('phoneValid'),
                document.getElementById('phoneInvalid'),
                document.getElementById('phoneError'),
                false
            );
        });
        
        // 手机号失焦验证（失焦时触发抖动）
        phoneInput.addEventListener('blur', function() {
            const phone = this.value.trim();
            isPhoneValid = validatePhone(phone);
            
            showValidationResult(
                this, 
                isPhoneValid, 
                document.getElementById('phoneValid'),
                document.getElementById('phoneInvalid'),
                document.getElementById('phoneError'),
                !isPhoneValid && phone.length > 0
            );
        });
        
        // 车牌号输入验证（输入时只显示图标，不抖动）
      
        
    
        
        // 提交按钮点击事件
        submitBtn.addEventListener('click', function() {
                    
            const phone = phoneInput.value;
       
            isPhoneValid = validatePhone(phone);
            
            
            // // 重置所有错误提示和图标
            document.querySelectorAll('.weui-cells__tips').forEach(el => el.style.display = 'none');
            document.querySelectorAll('.valid-icon, .invalid-icon').forEach(el => el.style.display = 'none');
            document.querySelectorAll('.shake').forEach(el => el.classList.remove('shake'));
            
            // 检查并显示所有字段的错误状态
            let hasError = false;
            let firstErrorElement = null;
             
             if (!isPhoneValid) {
                document.getElementById('phoneError').textContent = "请输入有效的11位手机号";
                document.getElementById('phoneError').style.display = 'block';
                document.getElementById('phoneInvalid').style.display = 'inline';
                phoneInput.parentElement.parentElement.classList.add('shake');
                hasError = true;
                if (!firstErrorElement) firstErrorElement = document.getElementById('phoneError');
                return
            } 
            // else {
            //     document.getElementById('phoneValid').style.display = 'inline';
            // }
            
       
            
     
            
            
            // 所有验证通过，提交表单
            submitCarInfo( phone);
        });
        
        // 提交车辆信息
        async function submitCarInfo( phone) {
            const loading = weui.loading('提交中...');
            try {
                // 构建提交数据
                const submitData = {
                    mobile: phone,

                
                };
                
       
                // 调用接口
                const response = await getCarListfind(submitData);
                
                loading.hide();
                
                if (response.code === 200) {
                    
                    console.log(response,'response');
                    
                    localStorage.setItem('phone', response.data.mobile);
                     localStorage.setItem('wechat_openid',  response.data.openid);
                    // 显示成功提示
                    weui.toast('登录成功', {
                        className: 'weui-toast_success',
                        duration: 2000
                    });
                    // 
                    setTimeout(()=>{
                        window.location.href="orderList.html"
                    },1000)
                         
                } 
               
                
            } catch (error) {
                loading.hide();
                console.error('提交失败:', error);
                const phone = phoneInput.value;
                  if(error.code==0){
                       localStorage.setItem('phone', phone);
                    // localStorage.clear()
                    window.location.href="/account.html"
                }
          
            }
        }
    </script>
</body>
</html>